<!DOCTYPE html>
<html>
  <head>
    <style>
        @font-face { font-family: codicon; src: url('font/codicon.ttf'); }
        .codicon {
            font-family: codicon, sans-serif;
            font-weight: 800;
            font-size: 30px;
        }
    </style>

    <link href="css/material_font.css" rel="stylesheet" type="text/css">
    <link href="css/quasar.prod.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <!-- Add the following at the end of your body tag -->
    <script src="js/vue.global.prod.js"></script>
    <script src="js/quasar.umd.prod.js"></script>
    <!-- https://html2canvas.hertzen.com/ -->
    <script src="js/html2canvas.min.js"></script>
    <script src="js/FileSaver.min.js"></script>

    <!-- example of injection point where you write your app template -->
    <div id="q-app" class="q-ma-md">
        <q-tabs
            v-model="tab.name"
            dense no-caps narrow-indicator inline-label
            class="text-grey" active-color="primary" indicator-color="primary" align="left"
        >
            <q-tab name="colors" label="Colors"></q-tab>
            <q-tab name="icons" label="Icons"></q-tab>
            <q-tab name="button-group" label="Button Group"></q-tab>
            <q-tab name="combo-box" label="Combo Box"></q-tab>
            <q-tab v-for="frame in frames" :name="frame.name" :label="frame.title"></q-tab>
            <q-tab name="checks" label="Checks"></q-tab>
            <q-tab name="progress" label="Progress"></q-tab>
            <q-tab name="thumb" label="Thumb"></q-tab>
            <q-tab name="scrollbar" label="Scrool Bar"></q-tab>
            <q-tab name="conf" label="Configurations"></q-tab>
        </q-tabs>

        <q-separator></q-separator>

        <q-tab-panels v-model="tab.name" animated>
            <q-tab-panel name="colors">
                <!-- Tab: 颜色表 -->
                <div class="row q-gutter-sm">
                    <div class="column q-gutter-sm">
                        <div style="width: 70px; height: 32px"></div>
                        <div style="width: 70px; height: 16px">Edge</div>
                        <div style="width: 70px; height: 16px">Background</div>
                        <div style="width: 70px; height: 16px">Foreground</div>
                    </div>
                    <div v-for="color, index in colors" class="column q-gutter-sm">
                        <q-input dense outlined v-model="colorNames[index]" style="width: 80px; margin: 0"></q-input>
                        <q-chip square clickable removable
                            :style="{ background: color, width: 80+'px', 'border-style': 'solid', 'border-color': '#DDD', 'margin': 0}"
                            @click="showColorDialog(color, c => colors[index] = c)"
                            @remove="removePresetColor(index)"
                        ></q-chip>
                        <q-chip square clickable removable
                            :style="{ background: bgColors[index], width: 80+'px', 'border-style': 'solid', 'border-color': '#DDD', 'margin': 0}"
                            @click="showColorDialog(bgColors[index], c => bgColors[index] = c)"
                            @remove="bgColors[index] = ''"
                        ></q-chip>
                        <q-chip square clickable removable
                            :style="{ background: fgColors[index], width: 80+'px', 'border-style': 'solid', 'border-color': '#DDD', 'margin': 0}"
                            @click="showColorDialog(fgColors[index], c => fgColors[index] = c)"
                            @remove="fgColors[index] = ''"
                        ></q-chip>
                    </div>

                    <q-btn dense color="primary" @click="showColorDialog(color, c => { colors.push(c); bgColors.push('#FFFFFF');})" icon="add"></q-btn>
                </div>
            </q-tab-panel>

            <q-tab-panel name="icons">
                <!-- Tab: 图标 -->
                <q-tabs
                    v-model="icons.tabName"
                    dense no-caps narrow-indicator inline-label
                    class="text-grey" active-color="primary" indicator-color="primary" align="left"
                >
                    <q-tab v-for="tab in icons.tabs" :name="tab.name" :label="tab.name"></q-tab>
                    <q-tab label="Add" icon="add" @click="addIconTab"></q-tab>
                </q-tabs>

                <q-tab-panels v-model="icons.tabName" animated>
                    <q-tab-panel v-for="tab, tabIdx in icons.tabs" :name="tab.name">
                        <div class="row q-gutter-md q-pb-md">
                            <q-btn color="primary" no-caps label="Save Icons" @click="saveIcons"></q-btn>
                            <q-input dense debounce="1000" outlined v-model="tab.name" label="Name"></q-input>
                            <q-input type="number" dense outlined v-model="tab.marginX" label="Margin-X"></q-input>
                            <q-input type="number" dense outlined v-model="tab.marginY" label="Margin-Y"></q-input>
                            <q-input type="number" dense outlined v-model="tab.fontSize" label="Font Size"></q-input>
                            <q-input type="number" dense outlined v-model="tab.fontWeight" label="Font Weight"></q-input>
                            <q-btn color="negative" flat no-caps icon="delete" @click="deleteIconTab(tabIdx)"></q-btn>
                        </div>

                        <div class="row q-gutter-md q-mb-md">
                            <q-checkbox v-for="color, index in colors"
                                v-model="tab.colors[index]" :style="{background: color}">
                                <q-chip square :style="{ background: bgColors[index], width: 20+'px'}"></q-chip>
                            </q-checkbox>
                        </div>
        
                        <div class="row">
                            <div>
                                <div
                                    v-for="item, index in tab.icons"
                                    @click="removeChoosenIconText(tab.icons, index)"
                                    @drop="ev => onDropIcon(ev, tab.icons, index)" @dragover="ev => ev.preventDefault()" draggable="true"
                                    @dragstart="ev => ev.dataTransfer.setData('index', index)"
                                    :style="{margin: tab.marginY + 'px ' + tab.marginX + 'px', 'font-family': item.type, 'font-size': tab.fontSize+'px', 'font-weight': tab.fontWeight, width: tab.fontSize+'px', display: 'inline'}"
                                >
                                    <image v-if="item.type == '_image_'" :src="'images/' + item.icon"></image>
                                    <template v-else>{{ item.icon }}</template>
                                </div>
                            </div>
                            <q-btn class="q-ml-md" color="primary" no-caps icon="add" @click="showAddIconsDialog(tab)"></q-btn>
                        </div>
                    </q-tab-panel>
                </q-tab-panels>
            </q-tab-panel>

            <q-tab-panel name="button-group">
                <div class="row q-gutter-md q-mb-md">
                    <q-btn color="primary" no-caps label="Save" @click="saveCanvas('button-group')"></q-btn>
                    <q-input dense outlined type="number" debounce="500" v-model="btg.height" label="Height"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="btg.width" label="Width"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="btg.cornerRadius" label="Corner Radius"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="btg.edge" label="Edge"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="btg.margin" label="Margin"></q-input>
                </div>
                <template color-model-name="btg.colors"></template>
            </q-tab-panel>

            <q-tab-panel name="combo-box">
                <div class="row q-gutter-md q-mb-md">
                    <q-btn color="primary" no-caps label="Save" @click="saveCanvas('combo-box')"></q-btn>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="cb.height" label="Height" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="cb.width" label="Width" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="cb.cornerRadius" label="Corner Radius" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="cb.edge" label="Edge" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="cb.margin" label="Margin" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="cb.fontSize" label="Icon Size" style="width: 120px;"></q-input>
                    <q-input dense outlined debounce="500" v-model="cb.icon" label="Drop Icon"></q-input>
                </div>
                <template color-model-name="cb.colors"></template>
                <template></template><!-- Do NOT remove this empty template, it will cause next preprocessChooseColors failed. -->
            </q-tab-panel>

            <template v-for="frame in frames">
                <q-tab-panel :name="frame.name">
                    <div class="row q-gutter-md q-mb-md">
                        <q-btn color="primary" no-caps label="Save" @click="saveCanvas(frame.name)"></q-btn>
                        <q-input dense outlined type="number" debounce="500" v-model="frame.height" label="Height"></q-input>
                        <q-input dense outlined type="number" debounce="500" v-model="frame.width" label="Width"></q-input>
                        <q-input dense outlined type="number" debounce="500" v-model="frame.cornerRadius" label="Corner Radius"></q-input>
                        <q-input dense outlined type="number" debounce="500" v-model="frame.edge" label="Edge"></q-input>
                        <q-input dense outlined type="number" debounce="500" v-model="frame.margin" label="Margin"></q-input>
                    </div>
                    <template color-model-name="frame.colors"></template>
                </q-tab-panel>
            </template>

            <q-tab-panel name="checks">
                <div class="row q-gutter-md q-mb-md">
                    <q-btn color="primary" no-caps label="Save" @click="saveCanvas('checks')"></q-btn>
                    <q-input dense outlined type="number" debounce="500" v-model="checks.height" label="Height"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="checks.width" label="Width"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="checks.fontSize" label="Font Size"></q-input>
                    <q-input dense outlined debounce="500" v-model="checks.icons" label="Icons(hex)"></q-input>
                </div>
                <template color-model-name="checks.colors"></template>
            </q-tab-panel>

            <q-tab-panel name="progress">
                <div class="row q-gutter-md q-mb-md">
                    <q-btn color="primary" no-caps label="Save" @click="saveCanvas('progress')"></q-btn>
                    <q-input dense outlined type="number" debounce="500" v-model="progress.height" label="Height"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="progress.width" label="Width"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="progress.marginX" label="Margin X"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="progress.marginY" label="Margin Y"></q-input>
                    <q-input dense outlined type="number" debounce="500" v-model="progress.cornerRadius" label="Corner Radius"></q-input>
                </div>
                <template color-model-name="progress.colors"></template>
            </q-tab-panel>

            <q-tab-panel name="thumb">
                <div class="row q-gutter-md q-mb-md">
                    <q-btn color="primary" no-caps label="Save" @click="saveCanvas('thumb')"></q-btn>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.width" label="Height" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.height" label="Width" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.width1" label="Width1" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.height1" label="Height1" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.width2" label="Width2" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.height2" label="Height2" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.cornerRadius1" label="Radius1" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="thumb.cornerRadius2" label="Radius2" style="width: 120px;"></q-input>
                    <q-input dense outlined width="80px" debounce="500" v-model="thumb.alpha2" label="Alpha2(0~1.0)" style="width: 120px;"></q-input>
                </div>
                <template color-model-name="thumb.colors"></template>
            </q-tab-panel>

            <q-tab-panel name="scrollbar">
                <div class="row q-gutter-md q-mb-md">
                    <q-btn color="primary" no-caps label="Save" @click="saveCanvas('scrollbar-horz', 'scrollbar-vert')"></q-btn>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="sb.width" label="Widdth" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="sb.height" label="Height" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="sb.btnSize" label="Button Size" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="sb.thumbSize" label="Thumb Size" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="sb.cornerRadius" label="Corner Radius" style="width: 120px;"></q-input>
                    <q-input dense outlined type="number" width="80px" debounce="500" v-model="sb.fontSize" label="Arrow Size" style="width: 120px;"></q-input>
                    <q-input dense outlined debounce="500" v-model="sb.icon" label="Arrow Icon" style="width: 120px;"></q-input>
                    <q-input dense outlined width="80px" debounce="500" v-model="sb.alpha" label="Alpha(0~1.0)" style="width: 120px;"></q-input>
                </div>
                <template color-model-name="sb.colors"></template>
            </q-tab-panel>

            <q-tab-panel name="conf">
                <!-- 配置 -->
                <div class="row q-gutter-md q-mb-md">
                    <q-btn dense color="primary" no-caps label="Download Configuration" @click="downloadConf()"></q-btn>
                    <q-file dense bg-color="primaray" filled v-model="confFileToLoad" label="Reload Configuration from File"
                        style="width: 250px;"
                    >
                        <template v-slot:prepend>
                          <q-icon name="settings"></q-icon>
                        </template>
                    </q-file>
                </div>
            </q-tab-panel>

        </q-tab-panels>

        <div class="row q-gutter-md q-mx-sm">
            <div><canvas id="canvasCtrls"></canvas></div>
            <div><canvas id="canvasCtrls2x"></canvas></div>
            <div><canvas id="canvasCtrlsVert"></canvas></div>
            <div><canvas id="canvasCtrlsVert2x"></canvas></div>
        </div>

        <q-dialog v-model="colorDialog.show">
            <q-card>
                <q-card-section class="q-pb-none">
                    <q-color v-model="colorDialog.color" style="width: 250px;"></q-color>
                </q-card-section>

                <q-card-section class="q-pb-none">
                    <q-chip v-for="color in histColors"
                        square clickable
                        :style="{ background: color, width: 20+'px'}"
                        @click="colorDialog.color = color"
                    >
                    </q-chip>
                </q-card-section>

                <q-card-actions align="right">
                    <q-btn flat label="OK" @click="onColorChoosed(colorDialog.color)" color="primary" v-close-popup></q-btn>
                    <q-btn flat label="Cancel" color="primary" v-close-popup></q-btn>
                </q-card-actions>
            </q-card>
        </q-dialog>

        <q-dialog v-model="iconDialog.show" position="right" full-height maximized>
            <q-card style="width: 1000px;">
            <q-card-section>
                <q-tabs
                    v-model="iconDialog.tabName"
                    dense no-caps narrow-indicator
                    class="text-grey" active-color="primary" indicator-color="primary" align="left"
                >
                    <q-tab v-for="font in fonts" :name="font.name" :label="font.name"></q-tab>
                    <q-tab name="image" label="Image"></q-tab>
                </q-tabs>
        
                <q-separator></q-separator>
        
                <q-tab-panels v-model="iconDialog.tabName" animated>
                    <q-tab-panel v-for="font in fonts" :name="font.name">
                        <div class="row q-gutter-md q-pb-md">
                            <q-input dense outlined v-model="font.icon" label="Icon(hex)"></q-input>
                            <q-btn color="primary" flat no-caps label="Add Icon" @click="addIconByHexCode(font)"></q-btn>
                            <div :style="{'font-family': font.name, 'font-size': '30px'}">
                                {{ String.fromCodePoint(parseInt(font.icon, 16)) }}
                            </div>
                        </div>

                        <a v-if="font.url" :href="font.url" target="_blank">Search Icons</a>

                        <q-btn
                            v-for="c in font.text" :label="c" no-caps :style="{'font-family': font.name, 'font-size': '30px'}" flat dense size="40px" padding="0px 10px"
                            @click="iconDialog.callback(c, font.name)"
                        >
                        </q-btn>
                    </q-tab-panel>
                    <q-tab-panel name="image">
                        <div class="row q-gutter-md q-pb-md">
                            <q-input dense outlined v-model="iconDialog.image" label="Image path(put under folder: skin-creator/web/images)" style="width: 300px;"></q-input>
                            <q-checkbox  v-model="iconDialog.replaceColor" label="Replace Color"></q-checkbox>
                            <q-btn color="primary" flat no-caps label="Add Image" @click="iconDialog.callback(iconDialog.image, '_image_', iconDialog.replaceColor)"></q-btn>
                        </div>
                        <image v-if="iconDialog.image" :src="'images/' + iconDialog.image"></image>
                    </q-tab-panel>
                </q-tab-panels>
            </q-card-section>
            </q-card>
        </q-dialog>
    </div>

    <div id="choose_colors" style="display: none;">
        <div class="row q-gutter-sm">
            <div v-for="color, index in colors" class="column">
                <q-chip :style="{ width: 80+'px', 'margin': '0px'}" square>
                    {{ colorNames[index] }}
                </q-chip>
                <q-checkbox v-model="$1[index]" :style="{background: color, width: 80+'px'}">
                    <q-chip square :style="{ background: bgColors[index], width: 20+'px'}"></q-chip>
                </q-checkbox>
            </div>
        </div>
    </div>

    <script>

        // This won't replace all templates.
        // function preprocessChooseColors() {
        //     const el = document.getElementById('choose_colors');
        //     let text = el.innerHTML;
        //     const els = document.getElementsByTagName('template');
        //     for (e of els) {
        //         console.log(e.outerHTML);
        //         e.outerHTML = e.outerHTML.replace(/<template color-model-name="(.*)"><\/template>/, text);
        //     }
        // }
        function preprocessChooseColors() {
            const el = document.getElementById('choose_colors');
            let text = el.innerHTML;

            next(document.body, '');

            function next(node, indent) {
                if (node.firstChild) next(node.firstChild, ' ' + indent);
                if (node.nextSibling) next(node.nextSibling, indent);

                if (node.tagName && node.tagName.toLowerCase() === 'template') {
                    // console.log(node.outerHTML);
                    node.outerHTML = node.outerHTML.replace(/<template color-model-name="(.*)"><\/template>/, text);
                }
            }
        }

        preprocessChooseColors();

    </script>

    <script src="js/utils.js"></script>
    <script src="js/main.js"></script>

  </body>
</html>
